<template>
  <div class="start">
      <div class="header">
        <h1>MBTI性格测试</h1>

      </div>
      <div class="main-content">
        <div class="main">
          <h2>MBTI 测试前须知</h2>

          <p v-for="(guideline,index) in guidelines" :key="index">
           {{index+1}}.{{guideline}}
          </p>
          <Button class="p-button-lg" label="开始测试" @click="start" />
        </div>



      </div>

  </div>

</template>
<script>
import Button from 'primevue/button';

import router from "@/router";
export default {
  data() {
    return {
      guidelines:[
          '参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。',
          '《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。',
          'MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。',
          '本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。',
          '只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。希望你能从中或多或少地获得一些有益的信息。'
      ]

    }
  },
  computed:{

  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.answerMap=new Map()
    },
    start(){
      router.push({name: 'home'})
    }

  },
  components:{
    Button
  }}
</script>
<style lang="scss">
.start{
  background-color: #f2f2f2;
  .header{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    h1{
      font-size: 40px;
      line-height: 40px;
      color: #41464b;
     // font-weight: bold;
    }
  }
  .main-content{
    height: 600px;
    .main{
      background-color: white;
      padding: 30px;
      margin-left: 20%;
      margin-right: 20%;
      height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      border-radius: 18px;
    }
  }


}

</style>
